//todo 此文件即为路由的配置文件

import {
  createRouter,
  // createWebHashHistory, //? 用的就是hash模式的路由
  createWebHistory, //? 用的就是history模式
} from "vue-router";
import * as service from "@/service";
import { getCookie } from "@/utils";
//? 通过路由懒加载的形式来引入组件
//? vue异步组件 + webpack代码分割来共同实现
// const Home = () => import('../pages/Home/index.vue');  异步组件
// webpackChunkName 自定义的，你根据它的类别来起名即可
const Home = () =>
  import(/*webpackChunkName: "Home"*/ "../pages/Home/index.vue");
const Selection = () =>
  import(/*webpackChunkName: "Home"*/ "../pages/Home/Selection.vue");
const Nines = () =>
  import(/*webpackChunkName: "Home"*/ "../pages/Nines/index.vue");
const index0 = () =>
  import(/*webpackChunkName: "Home"*/ "../pages/Nines/index0.vue");
const index1 = () =>
  import(/*webpackChunkName: "Home"*/ "../pages/Nines/index1.vue");
const index2 = () =>
  import(/*webpackChunkName: "Home"*/ "../pages/Nines/index2.vue");
const index3 = () =>
  import(/*webpackChunkName: "Home"*/ "../pages/Nines/index3.vue");
const index4 = () =>
  import(/*webpackChunkName: "Home"*/ "../pages/Nines/index4.vue");
const Cate = () =>
  import(/*webpackChunkName: "Home"*/ "../pages/Cate/index.vue");
const Cat = () => import(/*webpackChunkName: "Home"*/ "../pages/Cat/index.vue");
const CatList = () =>
  import(/*webpackChunkName: "Home"*/ "../pages/Cat/List.vue");
const Fqph = () =>
  import(/*webpackChunkName: "Home"*/ "../pages/Fqph/index.vue");
const Search = () =>
  import(/*webpackChunkName: "Home"*/ "../pages/Search/index.vue");
const Detail = () =>
  import(/*webpackChunkName: "Home"*/ "../pages/Detail/index.vue");
const List = () =>
  import(/*webpackChunkName: "movie"*/ "../pages/List/index.vue");
const Login = () =>
  import(/*webpackChunkName: "movie"*/ "../pages/Login/index.vue");
const Register = () =>
  import(/*webpackChunkName: "movie"*/ "../pages/Register/index.vue");
const Mine = () =>
  import(/*webpackChunkName: "movie"*/ "../pages/Mine/index.vue");
const Show = () =>
  import(/*webpackChunkName: "movie"*/ "../pages/Show/index.vue");
const Video = () =>
  import(/*webpackChunkName: "movie"*/ "../pages/Video/index.vue");
const FirstBrand = () =>
  import(/*webpackChunkName: "movie"*/ "../pages/FistBrand/index.vue");
const Star = () =>
  import(/*webpackChunkName: "movie"*/ "../pages/Star/index.vue");

const Setuser = () =>
  import(/*webpackChunkName: "movie"*/ "../pages/Setuser/index.vue");
const Footprint = () =>
  import(/*webpackChunkName: "movie"*/ "../pages/Footprint/index.vue");
const NineMail = () =>
  import(/*webpackChunkName: "Home"*/ "../pages/NineMail/index.vue");
const Discount = () =>
  import(/*webpackChunkName: "movie"*/ "../pages/discount/index.vue");
const Monther = () =>
  import(/*webpackChunkName: "movie"*/ "../pages/Monther/index.vue");
const Reel = () =>
  import(/*webpackChunkName: "movie"*/ "../pages/Reel/index.vue");
const NotFound = () =>
  import(/*webpackChunkName: "movie"*/ "../pages/NotFound/index.vue");

//todo 1 创建router实例

const router = createRouter({
  // 通过name的属性来给路由起名
  // 通过alias的属性给路由来起别名
  routes: [
    {
      path: "/",
      redirect: "/home", // 路由重定向
    },
    {
      path: "/monther",
      component: Monther,
      name: "monther",
    },
    {
      path: "/reel",
      component: Reel,
      name: "reel",
    },
    {
      path: "/firstbrand",
      component: FirstBrand,
      name: "firstbrand",
    },
    {
      path: "/discount",
      component: Discount,
      name: "discount",
    },
    {
      path: "/star",
      component: Star,
      name: "star",
    },
    {
      path: "/home",
      component: Home,
      name: "home", //命名路由
      alias: "/main",
      //todo 子路由配置[子路由表]
      redirect: "/home/selection",
      children: [
        {
          path: "selection",
          component: Selection,
          name: "selection",
        },
      ],
    },
    {
      path: "/ceat",
      component: Cate,
      name: "ceat",
      meta: {
        title: "分类",
      },
    },
    {
      path: "/nines",
      component: Nines,
      name: "nines",
      redirect: "/nines/index0",
      children: [
        {
          path: "index0", // 这里不需要 /   /home/hot
          component: index0,
          name: "index0",
        },
        {
          path: "index1", //  /home/classic
          component: index1,
          name: "index1",
        },
        {
          path: "index2", //  /home/classic
          component: index2,
          name: "index2",
        },
        {
          path: "index3", //  /home/classic
          component: index3,
          name: "index3",
        },
        {
          path: "index4", //  /home/classic
          component: index4,
          name: "index4",
        },
      ],
    },
    {
      path: "/cat",
      component: Cat,
      name: "cat",
    },
    {
      path: "/cat/list",
      component: CatList,
      name: "cat/list",
    },
    {
      path: "/fqph",
      component: Fqph,
      name: "fqph",
    },
    {
      path: "/search",
      component: Search,
      name: "search",
    },
    {
      path: "/video",
      component: Video,
      name: "video",
      meta: {
        title: "视频",
      },
    },
    {
      path: "/show",
      component: Show,
      name: "show",
      meta: {
        title: "我的收藏",
      },
      async beforeEnter(to, from, next) {
        const { staus } = await service.fetchToken(
          getCookie("userId"),
          getCookie("token")
        );
        if (staus === 1 || to.path === "/login") {
          next();
        } else {
          next("/login"); // 跳转login
        }
      },
    },
    {
      path: "/mine",
      component: Mine,
      name: "mine",
      meta: {
        title: "我的",
      },
    },
    {
      path: "/login",
      component: Login,
      name: "login",
      meta: {
        title: "登录",
      },
    },
    {
      path: "/nineMail/:cid&:goodid",
      component: NineMail,
      name: "nineMail",
      meta: {
        title: "商品详情",
      },
    },
    {
      path: "/footprint",
      component: Footprint,
      name: "footprint",
      meta: {
        title: "足迹",
      },
    },
    {
      path: "/setuser",
      component: Setuser,
      name: "setuser",
      meta: {
        title: "设置",
      },
    },
    {
      path: "/register",
      component: Register,
      name: "register",
      meta: {
        title: "注册",
      },
    },
    {
      path: "/list/:cid",
      component: List,
      name: "list",
    },
    {
      path: "/detail",
      component: Detail,
      name: "detail",
    },
    {
      path: "/:pathMatch(.*)*",
      name: "NotFound",
      component: NotFound,
    },
  ], // 路由表
  history: createWebHistory(), // 选择路由模式
});
//todo 2. 导出路由实例
export default router;
